<template>
    <div class="box">
        <h2>Provide、Inject</h2>
        <div>content1: {{ content1 }}</div>
        <div>content2.name: {{ content2.name }}</div>
        <button @click="changeContent1">修改content1</button>
        <button @click="changeContent2">修改content2</button>
        <button @click="changeContent2Name">修改content2.name</button>
        <Child></Child>
    </div>
</template>

<script>
// Provide、Inject 用于祖孙之间的通信
// 祖先组件:
//      使用provide将数据传递给后代组件
// 后带组件:
//      使用inject接收一下祖先传过来的数据
// 注意:
//      provide给后代传递参数,当祖先中的数据发生变化的时候,后代的数据是无法接收到的
//      相当于provide只初始化的时候,给后台传递一次数据,后面就不管了
//      那么为什么点击修改对象属性能修改呢?
//      因为对象的地址并没有发生变化,属性变了之后,后代拿到的这个对象还是原来的对象
import Child from "./Child";
export default {
    name: "ProvideInjectTest",
    provide() {
        return {
            content1: this.content1,
            content2: this.content2,
            changeContent1: this.changeContent1
        }
    },
    components: {
        Child,
    },
    data() {
        return {
            content1: "jack",
            content2: {
                name: "tom",
            },
        };
    },
    methods: {
        changeContent1() {
            this.content1 = 'jreey'
        },
        changeContent2() {
            this.content2 = { name: 'Tony' }
        },
        changeContent2Name() {
            this.content2.name = 'Rose'
        },
    }
};
</script>

<style lang="less" scoped>
</style>
